<template>
	<view class="aboutus-box">
		<uni-forms :modelValue="formData" class="form-s">
			<uni-forms-item class="uni-sug">
				<view class="uni-sug-label">请输入注销原因：</view>
				<view class="uni-sug-t">
					<textarea class="uni-sug-textarea" maxlength="300" v-model="formData.content" placeholder="请填写注销原因"></textarea>
				</view>
			</uni-forms-item>
			<view>
				点击下方"提交申请"按钮，即表示您已经阅读并同意隐私政策相关账户注销内容
			</view>
			<view class="btn" @click="submit">提交申请</view>
		</uni-forms>
	</view>
</template>

<script setup lang="ts">
	import {reactive } from 'vue'
	import { getLogout } from '@/common/API/login';
	import store from '@/store'
	const formData = reactive({
		content: null
	})
	
	const submit = async () => {
		if(!formData.content){
			uni.showToast({
				title:'请输入注销原因',
				icon:'none'
			})
			return
		}
		let userId = uni.getStorageSync('userId')
		let data = {
			disableDesc: formData.content,
			id: userId,
			status: 2 //1正常 2注销
		}
		let res = await getLogout(data)
		uni.showToast({
			title: '注销成功'
		});
		store.dispatch('logOut');
		uni.redirectTo({
			url:'/pages/login/login'
		})
	}
</script>
<style>
	page{
		height: 100%;
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.aboutus-box{
		padding: 32rpx;
		.uni-form-label{
			padding: 26rpx 0 20rpx 0;
			border-bottom: 1px solid rgba(229, 229, 229, 1);
			margin-bottom: 0;
			.uni-label{
				width: 350rpx;
			}
			.uni-rate{
				flex: 1;
				display: flex;
			}
			::v-deep .uni-forms-item__label{
				display: none;
			}
			::v-deep .uni-forms-item__content{
				display: flex;
				flex-direction: row;
			}
		}
		.uni-sug{
			margin: 0 0 20rpx 0;
			::v-deep .uni-forms-item__label{
				display: none;
			}
			.uni-sug-label{
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
				padding: 20rpx 0;
				.span{
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
		.uni-sug-textarea{
			width: 638rpx;
			height: 320rpx;
			font-size: 28rpx;
			padding: 24rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background: rgba(245, 245, 245, 1);
		}
		.btn{
			margin: 94rpx 32rpx 40rpx 32rpx;
			border-radius: 200rpx;
			background: rgba(253, 150, 24, 1);
			color: #fff;
			border-radius: 200rpx;
			height: 84rpx;
			font-size: 32rpx;
			text-align: center;
			line-height: 84rpx;
		}
	}
</style>